<template>
    <div class="qilin-login">
        <div class="qilin-login-container">
            <div class="qilin-login-container-header">vue2.x系统开发</div>
            <div class="qilin-login-container-box">
                <template v-if="isLogin">
                    <QilinForm :formConfig.sync="formLoginConfig" ref="formLoginRef" key="formLogin"></QilinForm>
                </template>
                <template v-else>
                    <QilinForm :formConfig.sync="formRegisterConfig" ref="formRegisterRef" key="formRegister"></QilinForm>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isLogin:true, //是否是登录页面标识
            formLoginConfig:{ //登录表单配置项
                elFormConfig:{
                    labelPosition:"top"
                },
                itemConfig:[
                    {
                        labelName:"账号",
                        dataName:"account",
                        type:"input",
                        inputType:"text",
                        width:24
                    },
                    {
                        labelName:"密码",
                        dataName:"password",
                        type:"input",
                        inputType:"password",
                        width:24
                    }
                ],
                buttonConfig:[
                    {
                        btnName:"登录",
                        type:"primary",
                        size:"small",
                        click:()=>{
                            this.$router.push("/homepage");
                        }
                    },
                    {
                        btnName:"注册",
                        type:"default",
                        size:"small",
                        click:()=>{
                            this.isLogin=false;
                        }
                    }
                ],
                submitData:{
                    account:"",
                    password:""
                }
            },
            formRegisterConfig:{
                elFormConfig:{
                    labelPosition:"top"
                },
                itemConfig:[
                    {
                        labelName:"账号",
                        dataName:"account",
                        type:"input",
                        inputType:"text",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        labelName:"密码",
                        dataName:"password",
                        type:"input",
                        inputType:"password",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        labelName:"姓名",
                        dataName:"name",
                        type:"input",
                        inputType:"text",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        labelName:"手机号",
                        dataName:"phonenumber",
                        type:"input",
                        inputType:"number",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入",
                                trigger:"blur"
                            }
                        ],
                        otherValidate:"phoneValidator"
                    }
                ],
                buttonConfig:[
                    {
                        btnName:"确认注册",
                        type:"primary",
                        size:"small",
                        click:()=>{
                            this.$refs["formRegisterRef"].formValidate((valid)=>{
                                if(valid){
                                    console.log(this.formRegisterConfig.submitData);
                                    this.isLogin=true;
                                };
                            });
                        }
                    },
                    {
                        btnName:"返回登录",
                        type:"default",
                        size:"small",
                        click:()=>{
                            this.$refs["formRegisterRef"].formResetFields();
                            this.isLogin=true;
                        }
                    }
                ],
                submitData:{
                    account:"",
                    password:"",
                    name:"",
                    phonenumber:""
                }
            }
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-login{
    position:relative;
    @include QilinWidthHeight();
    @include QilinBgImage("~@/assets/images/image10.jpeg");
    >.qilin-login-container{
        width:420px;
        transform:translate(-50%,-50%);
        @include QilinPosition(absolute,40%,50%);
        >.qilin-login-container-header{
            color:$primary-text-color;
            width:100%;
            font-size:$huge-text-size;
            font-weight:bolder;
            text-align:center;
            letter-spacing:1px;
            padding:20px;
        }
        >.qilin-login-container-box{
            background-color:#fff;
            border-radius:5px;
            padding:20px;
        }
    }
}
</style>
